<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav">
      <view class="nav-title">元宝搜券</view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main">
      <!-- 搜索卡片 -->
      <view class="search-card">
        <view class="search-box">
          <uni-icons type="search" size="16" color="#999" />
          <input v-model="searchQuery" type="text" class="search-input" placeholder="搜索商品名称或粘贴商品链接" />
          <uni-icons v-if="searchQuery" type="clear" size="16" color="#999" @click="clearSearch" />
        </view>
        <button class="search-btn" @click="searchCoupons" :disabled="isLoading">
          <uni-icons type="gift" size="16" color="#FFFFFF" />
          <text>{{ isLoading ? '加载中...' : '一键搜券' }}</text>
        </button>
      </view>

      <!-- 分类滚动区域 -->
      <scroll-view class="category-scroll" scroll-x>
        <view class="category-list">
          <text
            v-for="(category, index) in categories"
            :key="index"
            :class="['category-item', activeCategory === index ? 'active' : '']"
            @click="selectCategory(index)"
          >
            {{ category.name }}
          </text>
        </view>
      </scroll-view>

      <!-- 加载动画 -->
      <view v-if="isLoading" class="loading">
        <uni-icons type="spinner-cycle" size="32" color="#FF5B45" />
        <text>加载中...</text>
      </view>

      <!-- 商品列表 -->
      <view class="product-list">
        <view v-if="!isLoading && products.length === 0" class="empty">
          <text>暂无商品数据</text>
        </view>
        <view v-else>
          <view class="product-card" @click="goToBuy(product)" v-for="product in products" :key="product.id" >
            <view class="product-content">
              <image class="product-image" :src="product.mainPic" />
              <view class="product-info">
                <text class="product-title">{{ product.dtitle }}</text>
                <view class="store-info">
                  <uni-icons type="shop" size="12" color="#999" />
                  <text class="store-name">{{ product.shopName }}</text>
                  <text class="sales-info">销量: {{ product.monthlySales }}</text>
                </view>
                <view class="coupon-tag">
                  <text>优惠券 ¥{{ product.couponPrice }}</text>
                </view>
                <view class="price-info">
                  <text class="current-price">¥{{ product.actualPrice }}</text>
                  <text class="original-price">¥{{ product.originalPrice }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item active">
        <uni-icons type="home" size="24" color="#FF5B45" />
        <text class="tab-text">首页</text>
      </view>
      <view class="tab-item">
        <uni-icons type="shop" size="24" color="#999" />
        <text class="tab-text">美团到店</text>
      </view>
      <view class="tab-item">
        <uni-icons type="gift" size="24" color="#999" />
        <text class="tab-text">内部券</text>
      </view>
      <view class="tab-item">
        <uni-icons type="videocam" size="24" color="#999" />
        <text class="tab-text">低价电影</text>
      </view>
      <view class="tab-item">
        <uni-icons type="person" size="24" color="#999" />
        <text class="tab-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { getGoodsList } from '@/src/api/dataoke';

// 分类数据
const categories = ref([
  { id: 1, name: '优选' },
  { id: 2, name: '女装' },
  { id: 3, name: '男装' },
  { id: 4, name: '办公' },
  { id: 5, name: '家居' },
  { id: 6, name: '零食' },
]);

// 当前选中的分类
const activeCategory = ref(0);

// 商品列表
const products = ref([]);

// 加载状态
const isLoading = ref(false);

// 搜索关键词
const searchQuery = ref('');

// 首次加载数据
onMounted(() => {
  fetchGoods();
});

// 获取商品数据
const fetchGoods = async (keyWords = '', type = 1) => {
  isLoading.value = true; // 开始加载
  try {
    const params = {
      keyWords,
      pageSize: 10,
      pageId: 1,
      type,
    };
    const response = await getGoodsList(params);
    products.value = response.data.list;
  } catch (error) {
    console.error('Error fetching goods:', error);
  } finally {
    isLoading.value = false; // 结束加载
  }
};

// 选择分类
const selectCategory = (index) => {
  activeCategory.value = index;
  const name = categories.value[index].name;
  fetchGoods(name); // 根据分类ID获取商品
};

// 搜索商品
const searchCoupons = async () => {
  fetchGoods(searchQuery.value);
};

// 清空搜索框
const clearSearch = () => {
  searchQuery.value = '';
  fetchGoods(); // 重新加载默认数据
};


// 跳转x下单链接
const goToBuy = (product) => {
	  // 获取商品的跳转链接
	  const buyLink = product.couponLink || product.itemLink;
 window.location.href=buyLink
};
</script>

<style>
page {
  height: 100%;
  background-color: #F5F5F5;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.nav {
  background: linear-gradient(135deg, #FF5B45, #FF8F6B);
  padding: 20rpx 30rpx;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.nav-title {
  color: #FFFFFF;
  font-size: 36rpx;
  text-align: center;
  font-weight: bold;
}

.main {
  flex: 1;
  margin-top: 90rpx;
  padding: 30rpx;
  padding-bottom: 120rpx;
}

.search-card {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #F9FAFB;
  border-radius: 16rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 30rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  margin-left: 20rpx;
}

.search-btn {
  background-color: #FF5B45;
  color: #FFFFFF;
  font-size: 28rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-btn text {
  margin-left: 12rpx;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
  margin-bottom: 40rpx;
}

.platform-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.platform-icon {
  width: 96rpx;
  height: 96rpx;
  margin-bottom: 8rpx;
}

.platform-name {
  font-size: 24rpx;
  font-weight: 600;
  margin-bottom: 4rpx;
}

.platform-desc {
  font-size: 20rpx;
  color: #999;
}

.platform-highlight {
  color: #FF5B45;
}

.category-scroll {
  margin-bottom: 40rpx;
  white-space: nowrap;
}

.category-list {
  display: inline-flex;
  padding: 0 30rpx;
}

.category-item {
  font-size: 28rpx;
  color: #666;
  margin-right: 48rpx;
  position: relative;
}

.category-item.active {
  color: #FF5B45;
  font-weight: 500;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.product-card {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
}

.product-content {
  display: flex;
  gap: 30rpx;
}

.product-image {
  width: 224rpx;
  height: 224rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-title {
  font-size: 28rpx;
  line-height: 1.4;
  margin-bottom: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.store-info {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 16rpx;
}

.store-name {
  margin-left: 8rpx;
}

.sales-info {
  margin-left: 16rpx;
}

.coupon-tag {
  background-color: #FFF1F0;
  color: #FF5B45;
  font-size: 24rpx;
  padding: 16rpx;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  width: fit-content;
}

.price-info {
  display: flex;
  align-items: baseline;
}

.current-price {
  color: #FF5B45;
  font-size: 32rpx;
  font-weight: 500;
}

.original-price {
  color: #999;
  font-size: 24rpx;
  text-decoration: line-through;
  margin-left: 16rpx;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #FFFFFF;
  border-top: 2rpx solid #F0F0F0;
  display: flex;
  padding: 0 48rpx;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-text {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}

.tab-item.active .tab-text {
  color: #FF5B45;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
}

.loading text {
  margin-top: 10rpx;
  font-size: 28rpx;
  color: #666;
}

.empty {
  text-align: center;
  padding: 20rpx;
  font-size: 28rpx;
  color: #999;
}
</style>